// 重绘是指当元素的外观发生改变，但不影响其布局时，浏览器会重新绘制这个元素。例如，改变元素的颜色、背景色、边框等样式属性，都会触发重绘。

// 回流是指当元素的布局发生改变，浏览器需要重新计算元素的几何属性（位置、大小等），并重新构建渲染树。例如，改变元素的宽度、高度、位置等属性，都会触发回流。

// 重绘和回流的区别在于，重绘只需要重新绘制元素的外观，而回流需要重新计算元素的布局和重新构建渲染树。


// 为了优化页面性能，我们可以采取一些措施来减少回流和重绘的次数：

// 1. 使用CSS3动画和过渡：CSS3动画和过渡使用GPU加速，可以减少回流和重绘的次数。

// 2. 批量修改样式：如果需要修改多个样式属性，可以将它们合并到一个样式修改中，这样可以减少回流和重绘的次数。

// 3. 使用文档片段：在DOM中频繁插入大量元素时，可以使用文档片段（DocumentFragment）来减少回流次数。

// 4. 避免强制同步布局：在获取某些元素的布局信息（如宽度、高度）时，避免使用会触发回流的属性（如offsetWidth、offsetHeight），可以使用getBoundingClientRect()等方法来获取布局信息。

// 总之，了解重绘和回流的概念以及它们的区别，可以帮助我们更好地优化页面性能，提升用户体验。


// 回流会引起重绘 重绘不会引起回流